<template>
    <div>
        <el-container style="height: 100%;background-color: #000;">

            <el-container >
                <el-row style="width: 23%;position: absolute;">
                    <el-col  class="aside">
                        <el-aside style="padding-top:10px">
                            <el-tree
                                    :data="treelist"
                                    :props="defaultProps"
                                    node-key="id"
                                    ref="SlotMenuList"
                                    :filter-node-method="filterNode"
                                    @node-contextmenu='rihgtClick'
                                    accordion
                            >
            <span class="slot-t-node" slot-scope="{ node, data }" >
              <span v-show="!node.edit">
                <span v-show="((data.children )&& (data.children.length >= 1))||(data.pid==-3)">
                  <i :class="{ 'fa fa-plus-square': !node.expanded, 'fa fa-minus-square':node.expanded}" />
                  <span :class="[data.id >= maxexpandId ? 'slot-t-node--label' : '']" >{{node.label}}</span>
                </span>
                <span v-show="((!data.children) || (data.children.length == 0))&&(data.pid!=-3)">
                  <i class='' style='margin-right:10px'></i>
                  <span :class="[data.id >= maxexpandId ? 'slot-t-node--label' : '']" @click="NID(data,k) " style="color:	#0000FF">{{node.label}}</span>
                </span>
              </span>
                <!-- 编辑输入框 -->
              <span v-show="node.edit">
                <el-input class="slot-t-input" size="mini" autofocus
                          v-model="data.name"
                          :ref="'slotTreeInput'+data.id"
                          @blur.stop="NodeBlur(node, data)"
                          @keyup.enter.native="NodeBlur(node, data)"></el-input>
              </span>
            </span>
                            </el-tree>
<!--                            &lt;!&ndash;鼠标右键点击出现页面&ndash;&gt;-->
<!--                            <div v-show="menuVisible">-->
<!--                                <el-menu-->
<!--                                        id = "rightClickMenu"-->
<!--                                        class="el-menu-vertical"-->
<!--                                        @select="handleRightSelect"-->
<!--                                        active-text-color="#000"-->
<!--                                        text-color="#000">-->
<!--                                    <el-menu-item index="1" class="menuItem">-->
<!--                                        <span slot="title">添加文档</span>-->
<!--                                    </el-menu-item>-->
<!--                                    <el-menu-item index="5" class="menuItem">-->
<!--                                        <span slot="title">添加模块</span>-->
<!--                                    </el-menu-item>-->
<!--                                    <el-menu-item index="2" class="menuItem">-->
<!--                                        <span slot="title">添加分类</span>-->
<!--                                    </el-menu-item>-->
<!--                                    <el-menu-item index="3" class="menuItem">-->
<!--                                        <span slot="title">修改分类</span>-->
<!--                                    </el-menu-item>-->

<!--                                    <el-menu-item index="4" class="menuItem">-->
<!--                                        <span slot="title">删除分类</span>-->
<!--                                    </el-menu-item>-->
<!--                                </el-menu>-->
<!--                            </div>-->
                        </el-aside>
                    </el-col>
                </el-row>

            </el-container>

            <el-container >
                <el-main style="margin-left: -28%;margin-top: -20px;width: 320%;">
                    <el-container class="content" >
                        <div style="text-align: left;height: 20px">
                            <div class="position" style="display: block">
                                <slot name="header"> <span>{{Cname}}</span></slot>
                                <hr>
                            </div>
                        </div>
                        <div>
                            <slot></slot>
                        </div>

                    </el-container>

                    <el-container>

                        <add v-bind:ID="CID" ref="modalForm"></add>

                    </el-container>

                </el-main>

            </el-container>

        </el-container>
        <!--新增知识面板-->

        <el-dialog
                title="知识添加"
                :visible.sync="dialogVisible"
                width="50%"
                :before-close="handleClose"
        >
            <div class="t1">
                知识名称
            </div>
            <div class="a1">
                <el-input
                        placeholder="请输入内容"
                        v-model="input1"
                        clearable>
                </el-input>
            </div>
            <div class="t2">
                模块添加
            </div>
            <div class="t3">
                模块名称
            </div>
            <div class="a3">
                <el-input
                        placeholder="请输入内容"
                        v-model="input2"
                        clearable>
                </el-input>
            </div>
            <div class="t4">
                模块内容
            </div>
            <div class="a4">
                <el-input type="textarea" autosize v-model="textarea1"></el-input>
            </div>
            <div class="t5">
                模块附件
            </div>

            <div class="a5">
                <el-upload
                        ref="uploadone"
                        action="http://49.123.21.101:8090/file_test"
                        :auto-upload="false"
                        :before-upload="beforeUploadFile"
                        :file-list="fileList1"
                        :headers="MyHeaders"
                        :on-success="upFileSuccess1"
                >
                    <el-button size="small" plain>选择文件</el-button>
                    <div slot="tip" class="el-upload__tip">
                        不超过500kb
                    </div>
                </el-upload>
                <div >
                    <el-tooltip class="item" effect="dark" content="点此之前，务必确认填写内容已添加！" placement="right">
                        <el-link type="primary" @click="open" style="margin:5px">点此继续为该知识增加模块</el-link>
                    </el-tooltip>
                </div>
                <el-button @click="addmodel1()" style="margin:10px 30px">添加</el-button>
                <el-button type="primary" @click="dialogVisible = false" style="margin:10px 30px">返回</el-button>
            </div>
        </el-dialog>
        <!--新增模块面板-->
        <el-dialog
                title="模块添加"
                :visible.sync="dialogVisible1"
                width="50%"
                :before-close="handleClose">
            <div class="t1">
                知识名称
            </div>
            <div class="a1">
                <el-input
                        placeholder="请输入内容"
                        v-model="input3"
                        :disabled="true">
                </el-input>
            </div>
            <div class="t2">
                模块添加
            </div>
            <div class="t3">
                模块名称
            </div>
            <div class="a3">
                <el-input
                        placeholder="请输入内容"
                        v-model="input4"
                        clearable>
                </el-input>
            </div>
            <div class="t4">
                模块内容
            </div>
            <div class="a4">
                <el-input type="textarea" autosize v-model="textarea2"></el-input>
            </div>
            <div class="t5">
                模块附件
            </div>
            <div class="a5">
                <el-upload
                        ref="upload"
                        action="http://49.123.21.101:8090/file_test"
                        :auto-upload="false"
                        :before-upload="beforeUploadFile"
                        :file-list="fileList"
                        :headers="MyHeaders"
                        :on-success="upFileSuccess"
                >
                    <el-button size="small" plain>选择文件</el-button>
                    <div slot="tip" class="el-upload__tip">
                        不超过500kb
                    </div>
                </el-upload>
                <div>
                    <el-tooltip class="item" effect="dark" content="点此之前，务必确认填写内容已添加！" placement="right">
                        <el-link type="primary" @click="open" style="margin:5px">点此继续为该知识增加模块</el-link>
                    </el-tooltip>
                </div>
                <el-button @click="addmodel()" style="margin: 10px 20px" >添加</el-button>
                <el-button type="primary" @click="dialogVisible1 = false" style="margin: 10px 20px">返回</el-button>
            </div>


        </el-dialog>
    </div>
</template>

<script>
    import ElCol from "element-ui/packages/col/src/col";
    import {
      knowlege_add,
      knowlege_catalog, knowlege_catalog_add, knowlege_catalog_delete,
      knowlege_model_add,
      knowlege_model_look,
      knowlege_modify
    } from "@/api/file";
    import add from './add'
    import axios from "axios";
    // api.treelist = api.treelist.splice(0,10)
    let id = 1000;// eslint-disable-line no-unused-vars
    export default {
        components: { ElCol,add },
        data() {
            const item = {
                tagID: "ID001",
                name: "地区",
                description: "此处是改内容的详细描述...",
                creatorID: "Admin",
                regeneratorID: "Admin"
            };
            return {
                Cname:'',
                fileList:[],
                CID:-1,
                fileList1:[],
                MyHeaders: "application/json;charset=UTF-8",
                file_url:"",
                edit:false,
                maxexpandId: 95,
                treelist: [
                ],
                input:'',
                input1:'',
                k:0,
                input2:'',
                input3:'',
                input4:'',
                textarea1:'',
                textarea2:'',
                dialogVisible:false,
                dialogVisible1:false,
                scrollHeight:'0px',
                DATA: null,
                NODE: null,
                dialogNewFormVisible: false,
                dialogFormVisible: false,
                dialogClassifyVisible: false,
                tableData: Array(10).fill(item),
                //maxexpandId: this.maxexpandId,//新增节点开始id

                non_maxexpandId: this.maxexpandId,//新增节点开始id(不更改)
                isLoadingTree: true,//是否加载节点树
                defaultProps: {
                    children: 'children',
                    label: 'name'
                },
                filterText: '',
                currentPage4: 4,
                editObj: {},
                menuVisible: false,
                objectID: null,
                /*分类修改*/
                menuVisible2: false,
                objectID2: null
            };
        },
        methods: {
            NID(n,k){
                this.CID=n.id;
                console.log(this.CID);
                this.$refs.modalForm.getUrl(n.id,k);
                this.Cname=n.name;
            },
            beforeUploadFile(file) {
                // console.log(file)
                const extension = file.name.substring(file.name.lastIndexOf('.') + 1);// eslint-disable-line no-unused-vars
                const size = file.size / 1024;

                if (size > 500) {
                    this.$notify.warning({
                        title: '警告',
                        message: `文件大小不得超过500KB`
                    })
                }
            },
            getData() {
                // axios.get('http://49.123.21.101:8080/knowlege_catalog').then(response => {
                      knowlege_catalog().then(response => {
                      //  axios.get("http://49.123.21.101:8761/knowledgeConsumer/knowlege_catalog",{headers: {"token":"jycd"}}).then(response => {
                        let treelist=[];
                    //
                    for (let i in response.data.data)
                        treelist.push(response.data.data[i]);
                    this.treelist=treelist;
                    console.log('2222')
                    console.log(this.treelist)
                }).catch(error => {
                    console.log(error)
                })
            },
            addmodel(){

                this.$refs.upload.submit()

            },
            addmodel1(){

                this.$refs.uploadone.submit()

            },
            upFileSuccess(res,file){
                console.log(res)
                this.file_url=res.data;

                if(res.code==0){
                    console.log( this.DATA.id);
                    console.log( this.input4);
                    console.log( this.textarea2);
                    console.log( this.file_url);
                    // axios.post('http://49.123.21.101:8080/knowlege_model_add',{
                      knowlege_model_add({
                      id: this.DATA.id,
                        model_name: this.input4,
                        model_content: this.textarea2,
                        model_url: this.file_url }).then(res => {

                        this.$message({
                            message: '恭喜你，这是一条成功消息',
                            type: 'success'
                        });
                    })
                }

            },
            upFileSuccess1(res,file){
                console.log(res)
                this.file_url=res.data;

                if(res.code==0){
                    console.log( this.DATA.id);
                    console.log( this.input4);
                    console.log( this.DATA.level);
                    console.log( this.textarea2);
                    console.log( this.file_url);
                    // axios.post('http://49.123.21.101:8080/knowlege_add',{
                      knowlege_add({name:this.input1,
                        pid: this.DATA.id,
                        level:this.DATA.level,
                        model_name: this.input2,
                        model_content: this.textarea1,
                        model_url: this.file_url }).then(res => {

                        this.$message({
                            message: '恭喜你，这是一条成功消息',
                            type: 'success'
                        });
                    })
                }

            },
            open() {
                this.input2='',
                    this.textarea1='',
                    this.input4='',
                    this.textarea2='',
                    this.$message({
                        message: '内容已清空，请继续添加',
                        type: 'success'
                    });
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            filterNode(value, data) {
                console.log('value:',value)
                console.log('data:',data)
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
            },
            handleRightSelect(key) {
                console.log(key);
                if (key == 2) {
                    this.NodeAdd(this.NODE, this.DATA);
                    this.menuVisible = false;
                } else if (key == 3) {
                    this.NodeEdit(this.NODE, this.DATA);
                    this.menuVisible = false;
                } else if (key == 4) {
                    this.NodeDel(this.NODE, this.DATA);
                    this.menuVisible = false;
                } else if(key == 1){
                    this.dialogVisible=true;
                    this.menuVisible = false;
                }
                else if(key == 5){
                    this.dialogVisible1=true;
                    this.menuVisible = false;
                    this.Nodename(this.NODE, this.DATA);
                }
            },
            Nodename(n,d){
                // axios.get('http://49.123.21.101:8080/knowlege_model_look/'+d.id).then(response => {
              knowlege_model_look('/KnowledgeProvider/knowlege_model_look/'+d.id).then(response => {
                this.input3=response.data.data;
                }).catch(error => {
                    console.log(error)
                })
            },

            NodeBlur(n, d){//输入框失焦
                console.log(n, d)
                if(n.edit){
                    this.$set(n, 'edit', false)
                }
                this.$nextTick(() => {
                    this.$refs['slotTreeInput'+d.id].$refs.input.focus()
                    console.log(d.name)
                })
                // axios.put('http://49.123.21.101:8080/knowlege_modify',{
                      knowlege_modify({
                        id:d.id,
                    name:d.name,
                }).then(response=>{
                    console.log(d.name)
                }).catch(error => {
                    console.log(error)
                })
            },
            NodeEdit(n, d){//编辑节点

                if(!n.edit){//检测edit是否存在or是否为false
                    this.$set(n, 'edit', true)
                }
            },
            NodeDel(n, d){//删除节点
                console.log(n, d)
                let that = this;
                if(d.children && d.children.length !== 0){
                    this.$message.error("此节点有子级，不可删除！")
                    return false;
                }else{
                    //新增节点可直接删除，已存在的节点要二次确认
                    //删除操作
                    let DelFun = () => {
                        let _list = n.parent.data.children || n.parent.data;//节点同级数据
                        let _index = _list.map((c) => c.id).indexOf(d.id);
                      knowlege_catalog_delete('/KnowledgeProvider/knowlege_catalog_delete/'+d.id).then(res=>
                        {
                            console.log(_index)
                            _list.splice(_index, 1);
                            this.$message.success("删除成功！")})

                    }
                    //二次确认
                    let ConfirmFun = () => {
                        this.$confirm("是否删除此节点？","提示",{
                            confirmButtonText: "确认",
                            cancelButtonText: "取消",
                            type: "warning"
                        }).then(() => {
                            DelFun()
                        }).catch(() => {})
                    }
                    //判断是否是新增节点
                    d.id > this.non_maxexpandId ? DelFun() : ConfirmFun()
                }
            },
            NodeAdd(n, d){//新增节点
                console.log(n, d)
                //判断层级
                if(n.level >= 8){
                    this.$message.error("最多只支持八级！")
                    return false;
                }
                //新增数据
              knowlege_catalog_add({
                id: ++this.maxexpandId,
                    name: '新增知识',
                    pid: d.id,
                    level:n.level,
                }).then(res => {

                    d.children.push({
                        id: ++this.maxexpandId,
                        name: '新增知识',
                        pid: d.id,
                        children: []
                    });
                    this.$message({
                        message: '恭喜你，这是一条成功消息',
                        type: 'success'
                    });
                })


                //同时展开节点
                if(!n.expanded){
                    n.expanded = true
                }
            },
            rihgtClick(event, object, value, element) {// eslint-disable-line no-unused-vars
                if (this.objectID !== object.id) {
                    this.objectID = object.id;
                    this.menuVisible = true;
                    this.DATA = object;
                    this.NODE = value;
                } else {
                    this.menuVisible = !this.menuVisible;
                }
                document.addEventListener('click',(e)=>{
                    this.menuVisible = false;
                })
                let menu = document.querySelector("#rightClickMenu");
                /* 菜单定位基于鼠标点击位置 */
                menu.style.left = event.clientX + 10 + "px";
                menu.style.top = event.clientY - 80 + "px";
                menu.style.position = "absolute"; // 为新创建的DIV指定绝对定位
                menu.style.width = 120 + "px";
            },

        },
        mounted() { this.getData(); }

    };
</script>
<style scoped>
    .el-dialog__body{height: 85vh;overflow: auto;}
    .t1{
        font-size: 15px;
        font-weight: bold;
        position: absolute;
        margin-top: 5px;
        margin-left: 100px;
    }
    .a1{
        width: 300px;
        position: absolute;
        margin-top: 5px;
        margin-left: 186px;
    }
    .t2{
        font-size: 15px;
        font-weight: bold;
        position: absolute;
        margin-top: 65px;
        margin-left: 100px;
    }
    .t3{
        font-size: 14px;

        position: absolute;
        margin-top: 105px;
        margin-left: 100px;
    }
    .a3{
        width: 300px;
        position: absolute;
        margin-top: 105px;
        margin-left: 186px;
    }
    .t4{
        font-size: 14px;
        position: absolute;
        margin-top: 165px;
        margin-left: 100px;
    }
    .a4{
        width: 300px;
        position: absolute;
        margin-top: 165px;
        margin-left: 186px;
    }
    .t5{
        font-size: 14px;
        position: absolute;
        margin-top: 255px;
        margin-left: 100px;
    }
    .a5{
        width: 300px;
        position: absolute;
        margin-top: 255px;
        margin-left: 186px;
    }
    .content {
        top: 20px;
        left: 20px;
        background-color: #FFFFFF;

        width:100%;
        position: absolute;

    }

    .content .position {
        margin-left: 0px;
        font-weight: bold;
        font-size: 14px;
        margin-bottom: 10px;
    }
    /deep/ .el-input__inner {
        height: 22px;
        display: inline;
    }
    .el-aside {
        background-color: #FFFFFF;
        color: #333;
        text-align: center;
        height:600px;
        position:fixed;
        margin-bottom: 0px;

    }

    .el-main {
        background-color: #ffffff;
        color: #333;
        text-align: center;
        height:600px;
        position:absolute ;
        margin-bottom: 0px;
        margin-left: 400px;
        width:950px;
    }

    /*节点*/
    .slot-tree .slot-t-node--label{
        font-weight: 300;
    }
    /*按钮列表*/
    .slot-tree .slot-t-node .slot-t-icons{
        display: none;
        margin-left: 10px;
    }
    .slot-tree .slot-t-icons .el-button+.el-button{
        margin-left: 6px;
    }
    .slot-tree .el-tree-node__content:hover .slot-t-icons{
        display: inline-block;
    }
    .el-tree{
        padding-left: 0px;

        background-color: #F5F5F5;
        font-size: 0.9rem;
    }
    .el-dialog {
        margin: 20px auto !important;
        height: 95%;
        overflow: auto;
    }
    .el-aside .el-tree-node{
        white-space: normal;
    }
    .el-tree .el-tree-node__content {
        　　　　display: block;
        height: auto;
    }
</style>
